<template>
    <div v-loading="loading">
        <el-card body-style="padding:10px" class="box-card">

            <el-select v-model="query.status" placeholder="请选择状态">
                <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
            </el-select>

            <el-select v-model="query.payment" placeholder="请选择类型">
                <el-option v-for="item in options2" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
            </el-select>

            <el-button @click="page = 1; init()" size="small" style="margin-left: 30px;" type="primary">搜索</el-button>
            <el-button @click="page = 1; init()" icon="el-icon-refresh-right" size="small" type="primary">刷新</el-button>
        </el-card>
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="550px" size="small" style="width: 100%">
                <el-table-column label="密聊ID" prop="secret_id"></el-table-column>
                <el-table-column label="订单ID" prop="order_id"></el-table-column>
                <el-table-column label="用户ID" prop="user_id">
                    <template slot-scope="scope">
                        <UserInfo :user_id="scope.row.user_id" :userInfos="scope.row.author" v-if="scope.row.user_id">
                        </UserInfo>
                    </template>
                </el-table-column>
                <el-table-column label="描述" prop="desc"></el-table-column>


                <el-table-column label="状态" prop="status">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 1">待接单</div>
                        <div v-else-if="scope.row.status == 2">已拒绝</div>
                        <div v-else-if="scope.row.status == 3">进行中</div>
                        <div v-else-if="scope.row.status == 4">已完成</div>
                        <div v-else>已取消</div>
                    </template>
                </el-table-column>

                <el-table-column label="类型" prop="type">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type == 'one_by_one'">1v1密聊</div>
                        <div v-else-if="scope.row.type == 'same_city'">同城空降</div>
                        <div v-else-if="scope.row.type == 'customized'">私人订制</div>
                    </template>
                </el-table-column>

                <el-table-column label="添加时间" sortable prop="created_at"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="toDetails(scope.row.order_id, scope.row.status)" size="mini" type="success"
                            style="padding: 10px" v-permission="['ADMIN', 'SECRET_TRADE_DETAILS']">详情</el-button>
                        <el-popconfirm @confirm="reasonShowFun(scope.row.order_id)" title="确定要取消这个订单吗？" v-if="scope.row.status == 1 || scope.row.status == 3">
                            <el-button size="mini" slot="reference" type="danger" style="padding: 10px"
                                v-permission="['ADMIN', 'SECRET_TRADE_COLSE_ORDER']">取消订单</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 取消订单 -->
        <el-dialog :visible.sync="reasonShow" title="取消订单" width="800px">
            <el-form :model="reasonForm">
                <el-form-item label="取消原因">
                    <el-input placeholder="请输入消原因" style="width: 500px" v-model="reasonForm.reason"
                        type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="reasonShow = false">取 消</el-button>
                <el-button @click="colseOrder" :loading="submitComplete" type="primary">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 分页组件 -->
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
                layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>
    </div>
</template>
      
<script>
import treeSelect from '@/components/SelectTree/index'
import medium from '@/components/medium/index'
import initData from '@/mixins/index'
export default {
    name: "secret-chat-trade-list",
    mixins: [initData],
    components: {
        treeSelect,
        medium
    },
    data() {
        return {
            query: {
                status: 1,
                type: null
            },
            visible: false,
            loading: false,
            tableData: [],
            options: [
                {
                    name: '待接单',
                    value: 1,
                },
                {
                    name: '已拒绝',
                    value: 2,
                }, {
                    name: '进行中',
                    value: 3,
                },
                {
                    name: '已完成 ',
                    value: 4,
                },
                {
                    name: '已取消 ',
                    value: 5,
                }
            ],
            options2: [
                {
                    name: '1v1密聊',
                    value: 'one_by_one',
                },
                {
                    name: '同城空降',
                    value: 'same_city',
                },
                {
                    name: '私人订制',
                    value: 'customized',
                }
            ],
            formattedDate: '',
            reasonForm: {
                id:'',
                reason: '',  //理由
            },
            reasonShow:false,
            submitComplete:false
        }
    },
    mounted() {
        //this.getworksList()
        this.beforeInit()
    },
    methods: {
        beforeInit() {
            this.url = '/secret/order/index'
            this.init() //重新请求数据
        },

        toDetails(id, type) {
            // if (type == 0 || type == 1) {
            //     this.$message({
            //         message: '待接单订单无详情',
            //         type: 'warning'
            //     });
            //     return
            // }
            this.$router.push({ path: "/secret-chat-trade-details?id=" + id });
        },

        reasonShowFun(id) {
            this.reasonForm.id = id
            this.reasonShow = true
        },

        colseOrder(){
            if (this.submitComplete) return
            this.submitComplete = true
            const orderId = this.reasonForm.id
            delete this.reasonForm.id
            this.$request.put('/secret/order/cancel/' + orderId,this.reasonForm).then((res) => {
                this.$message.success('取消成功')
                this.submitComplete = false
                this.reasonShow = false
                this.init()
            }).catch((error) => {
                this.submitComplete = false
            });
        }

    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}
</style>